<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Comet - SSE、事件流</title>
</head>

<body>
    <script>
        window.onload = function () {
            // Comet 指的是一种更高级的AJAX技术（服务器推送）
            // ajax是一种页面向服务器请求数据，Comet是服务器向页面推送数据的技术
            // 并且几乎能够实时的推送数据，适合于体育比赛的分数和股票报价
            // 三种实现Comet的方法:

            // 长轮询:页面发发起一个请求,然后服务器一直保持连接,直到有数据可以发送,
            // 发送完了后随即又建立一个新的连接...往复..
            // 这一过程在页面打开期间一直持续不断

            // 短轮询:页面发起一个请求，服务器返回数据，不管数据是否有效，随即断开后，页面又发送一个请求...往复执行

            // 流：页面只需在最开始建立一个http请求，服务器便会一直保持连接的状态，然后周期性的向页面发送数据
            (function () {
                // SSE(服务器发送事件) 用于创建到服务器的单向连接，服务器可以通过这个连接发送任意数量的数据
                // 响应的MIME类型：text/event-stream 响应的格式为纯文本，最简单的的情况是每个数据都带有前缀' data: '有冒号
                // SSE支持长短轮询和http流
                // 而且能在断开连接时自动确定何时重新连接
                
                // 注意传入的url必须与创建对象的页面同源相同url模式，域，端口
                // EventSource的实例有一个readyState属性，0 表示正在连接服务器，1 表示打开了连接，2 表示关闭了连接
                // 有三个事件：
                // open 在建立连接时触发
                // message 在从服务区接受到新事件时触发
                // error在无法建立连接时触发
                var source =new EventSource("myevents.php");
                source.onmessage=function(event){
                    console.log(event.data);
                    // 处理数据
                    // 服务器返回的数据以字符串的形式保存在event.data中
                }
                // 如果想强止立即断开连接并且不再重新连接，可以调用close();
                source.close();
            })();
        }
    </script>
</body>

</html>